<template>
	<u-sticky>
		<view class="search-bar">
			<view style="height: 48px;display: flex;align-items: center;background: #fff;padding: 0 32rpx;box-sizing: border-box;">
                <u-search
                    v-model="queryVal"
                    :inputStyle="{ height: '36px', fontSize: '30rpx' }"
                    shape="round"
                    :placeholder="placeholder"
                    height="60rpx"
                    :showAction="true"
                    :clearabled="false"
                    :disabled="disabled"
                    inputAlign="center"
                    :actionStyle="{ color: '#808695', fontSize: '16px' }"
                    @search="onSearchBtn"
                    @clear="onSearchBtn('')"
                    @custom="onSearchBtn"
                    @change="onValChange"
                    @click="onClickSearchBtn"
                ></u-search>
            </view>
			<view class="search-bar-top-box">
				<view class="search-bar-item" style="border-right: solid 1rpx #e8eaec;" @click="onSearchLeftItem">
					<view class="search-bar-item-val">{{ searchLeftItemName || searchLeftItemNoDataName }}</view>
					<u-icon name="arrow-down" size="14" color="#515a6e"></u-icon>
				</view>
				<view class="search-bar-item" @click="onSearchRightItem">
					<view class="search-bar-item-val">{{ searchRightItemName || searchRightItemNoDataName }}</view>
					<u-icon name="arrow-down" size="14" color="#515a6e"></u-icon>
				</view>
			</view>
		</view>
	</u-sticky>
</template>

<script>
	export default {
		name: 'JkSearchBar',
		props: {
			searchLeftItemName: {
				type: String,
				default: ''
			},
			searchLeftItemNoDataName: {
				type: String,
				default: '车间'
			},
			searchRightItemName: {
				type: String,
				default: ''
			},
			searchRightItemNoDataName: {
				type: String,
				default: '工序'
			},
			searchVal: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '设备编号'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				queryVal: ''
			};
		},
		methods: {
			onClickSearchBtn() {
				this.$emit('click-input');
			},
			onValChange(val) {
				this.$emit('update:searchVal', val);
			},
			onSearchLeftItem(val) {
				this.$emit('search-left-item', val);
			},
			onSearchRightItem(val) {
				this.$emit('search-right-item', val);
			},
			onSearchBtn(val) {
				this.$emit('search', val);
			},
		},
		watch: {
			searchVal: {
				handler(newVal) {
					this.queryVal = newVal;
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>
<style lang="scss" scoped>
    // 搜索栏样式
    .search-bar {
        height: 96px;
        background: #fff;
        padding: 0 0px 8px 0px;
        box-sizing: border-box;
        box-shadow: 0px 0px 3px 1px #c5c8ce;
        .search-bar-top-box {
            height: 48px;
            display: flex;
            border-top: solid 1rpx #e8eaec;
            .search-bar-item {
                width: 50%;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #515a6e;
                box-sizing: border-box;

                .search-bar-item-val {
                    margin-right: 8rpx;
                    font-size: 30rpx;
                }
            }
        }

    }
</style>
